<template>
  <div id="app">
    <div class="todoapp">
      <TodoHeaderVue @Chufa="chufaFn" @isAllEv="isAllFN" :arr="list" />
      <TodoMainVue :arr="showArr" @delEv="delFn" />
      <TodoFooterVue :arr="showArr" @typeEV="typeFN" @delEV="delDoneFn" />
    </div>
  </div>
</template>

<script>
// 目标1：创建项目，分组键，显示基础样式
// 1.vue create 项目名脚手架
// 2.清空欢迎页面-关闭eslint
// 3.分析需求，分三个组件
// 4.创建3个组件赋值进入标签和样式
// 5.找到styles文件，拿过来引入到main.js中
// 6.3个组件引入到app.vue中注册使用
import TodoHeaderVue from "./components/TodoHeader.vue"
import TodoMainVue from "./components/TodoMain.vue"
import TodoFooterVue from "./components/TodoFooter.vue"
import "./styles/base.css"
import "./styles/index.css"

// 目标2：铺设待办任务
// 1.数据md赋值到app.vue中定义（保证只有一个数据源---3个组件都传入使用）
// 2.数组传入todomain.vue组件内，内v-for循环

// 目标3：创建任务
// 1.todoHeader里input绑定b-model和变量
// 2.input绑定回车键盘抬起的时间
// 3.子船夫计数，把新任务名字传app.vue，添加到数组里
// 4.子组件回车事件中，做控制判断，清空输入框

// 目标4：删除任务
// 1.删除按钮-绑定点击事件-传入id区别
// 2.子传父，把要删除任务id传给app.vue中找到当前对应的id，删除数据

// 目标5：底部同级数量
// 1.todofooter.vue里props定义变量arr
// 2.app.vue中把数组传入
// 3.todofooter.vue中定义计算属性统计任务数量

// 目标6：数据筛选
// 1.高亮切换
// 1.1动态class，selected来判断，3个分别给了3个标记，和选中的变量做===判断
// 1.2 3个a绑定事件，点击谁，选中变量变成对应的标记字符串，子传父

// 2.切换数据
// 2.1子组件内，子传父计数，把标记的标签传出来
// 2.2父组件内，data里定义getSel中转一手，
// 2.3父组件内，定义showArr计算属性，根据getSel值，配合filter方法进行筛选，盘算
// 2.4在上面传父传子的list改称为showArr（计算属性）

// 目标7：清空已完成
// 1.清空完成按钮--点击事件
// 2.$emit通知父亲App.vue里的方法
// 3.fiflter数组方法筛选未完成任务覆盖list

// 目标8：本地缓存
// 1.watch侦听list改变（开启深度）
// 2.只要侦听到改变，覆盖值村里本地list
// 3。list变量默认值，从本地取

// 目标9: 全选
// 9.0 - 全选框 v-model绑定isAll计算属性
// 9.1 - 统计小选框影响全选框, 使用every方法统计
// 9.2 - 页面全选框改变, 选中状态 -> 改写isAll计算属性完成写法
// 9.3 - 在set里拿到选中状态 -> App.vue, 影响小选框obj.isDone值
export default {
  name: 'App',
  data () {
    return {
      list: JSON.parse(localStorage.getItem('newList')) || [],
      getSel: 'all'//默认显示全部
    }
  },
  components: {
    TodoHeaderVue,
    TodoMainVue,
    TodoFooterVue
  },

  methods: {
    // 创建
    chufaFn (name) {
      // 添加逻辑
      // 新对象的id值
      // 如果当前的list的长度为1那么就让id从100就开始减去最后一个+1,这个算的就是id
      let id = this.list.length === 0 ? 100 : this.list[this.list.length - 1].id + 1
      //  添加数据
      // this.list.push({ ...obj })
      this.list.push({
        id: id,
        name: name,
        isDone: false//任务刚产生，未完成的状态

      })
    },
    // 删除
    delFn (idIndex) {
      // 获取对应的id
      // 当前数据里过滤每一项的id等于要删除的id项
      let ids = this.list.filter(obj => obj.id === idIndex)
      // 删除
      this.list.splice(ids, 1)
    },
    // 改变筛选条件
    typeFN (get) {//筛选条件（all,yes,no)
      this.getSel = get
    },
    // 清空已完成的数据
    delDoneFn () {
      this.list = this.list.filter(obj => obj.isDone === false)
    },
    // 小选框
    isAllFN (bool) {
      this.list.forEach(obj =>
        obj.isDone = bool

      )
    }
  },
  // 因为切换根本不是固定的值，所以是要考list数组，以及getSel的值配合的
  computed: {
    showArr () {
      // 要显示的数据数组，来源于list和筛选标记的匹配后结果
      if (this.getSel === 'yes') {//筛选已完成数据
        return this.list.filter(obj => obj.isDone === true)
      } else if (this.getSel === 'no') {
        return this.list.filter(obj => obj.isDone === false)
      } else {
        // 不是yes已经完成，不是no未完成，只有第三种情况全部的数据，默认把list直接返回
        return this.list
      }
    }
  },
  watch: {
    list: {
      deep: true,
      handler () {
        // 存本地
        // 只要list改变, 这里就会侦听到马上触发
        // 把list缓存到本地
        localStorage.setItem('newList', JSON.stringify(this.list))

      }
    }
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
